/** */

<template>
  <div>
    <div
      :style="{
        marginTop: '20px',
      }"
    ></div>
    <VueDraggable ref="el" v-model="list" class="container">
      <div v-for="item in list" :key="item.id" class="item">
        {{ item.name }}
      </div>
    </VueDraggable>
  </div>
</template>

<script>
import { VueDraggable } from 'vue-draggable-plus'

export default {
  name: 'dragTest',
  components: {
    VueDraggable,
  },
  data() {
    const list = [
      {
        name: 'Joao',
        id: 1,
      },
      {
        name: 'Jean',
        id: 2,
      },
      {
        // TODO: 这里有个bug
        name: 'Johanna',
        id: 3,
      },
      {
        name: 'Juan',
        id: 4,
      },
    ]

    return {
      list,
    }
  },
}
</script>

<style>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.container {
  /* display: grid; */
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.item {
  /* width: 200px; */
  padding: 1px 10px 4px 10px;
  background-color: red;
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: move;
}
</style>
